<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>web的大作业</title>
    <style type="text/css">
        #top{
            height:31px;
            background-color:rgb(244,244,244);
        }
        #top>p{
            display:inline-block;
            font-weight:lighter;
            font-size:12px;
        }
        #top>img{
            position:absolute;
            left:249px;
            display:inline-block;
            top:4px;
        }
        #topfive{
            position:relative;
            left:888px;
            top:4px;
        }
        #toptwo{
            position:relative;
            left:169px;
            top:6px;
        }
        #topone{
            position:absolute;
            top:9px;
            text-align:center;
            left:111px;
        }
        #topfour{
            position:relative;
            left:861px;
            top:4px;
        }
        #topaone>form>textarea{
            border:#f00 1px solid;
            width:402px;
            height:39px;
            font-size:14px;
            color:#bcbcbc;
            margin-top:10px;
        }
        #topthree{
            position:relative;
            left:199px;
            top:4px;
        }
        #topa{
            border-bottom:4px #f00 solid;
            height:159px;
            background-color:#fff;
        }
        form>textarea{
            text-indent:13px;
        }
        #topaone>form{
            display:inline-block;
            position:relative;
            left:207px;
        }
        #p2{
            position:relative;
            left:296px;
        }
        #p1{
            position:relative;
            left:111px;
            top:22px;
        }
        #topatwo>ul>li{
            display:inline-block;
            margin-right:43px;
            text-align:center;
            padding-top:4px;
            width:94px;
            height:26px;
        }
        #topatwo>ul{
            position:relative;
            left:117px;
            top:28px;
        }
        #topbone{
            position:relative;
            left:111px;
            top:24px;
        }
        #topaone>form>p{
            display:inline-block;
            background-color:#f00;
            color:#fff;
            text-align:center;
            line-height:28px;
            width:91px;
            height:40px;
            position:relative;
            left:-4px;
            top:-17px;
        }
        #topatwo>ul>li:hover{
            color:#fff;
            background-color:#fd0304;
            text-align:center;
        }
        #topb{
            background-color:#fbfbfb;
        }
        #topbtwo{
            width:214px;
            height:44px;
            position:relative;
            left:111px;
            top:46px;
        }
        #topb>div{
            background-color:#fff;
        }
        #topbtwo>img{
            position:relative;
            left:17px;
            top:9px;
        }
        #topbthree{
            width:215px;
            height:533px;
            position:relative;
            top:73px;
            left:112px;
        }
        #topbtwo>p{
            position:relative;
            left:55px;
            top:-27px;
            font-size:20px;
        }
        #topbthree-2{
            position:relative;
            left:49px;
            top:66px;
        }
        #topbthree-1{
            color:#f00;
            position:relative;
            left:48px;
            top:26px;
        }
        #topbfour{
            width:972px;
            height:581px;
            background-color:lime;
            position:relative;
            left:341px;
            top:-530px;
        }
        #topbfour>ul{
            position:relative;
            left:19px;
            top:19px;
        }
        #topbfour>ul>li{
            width:221px;
            height:251px;
            margin-right:7px;
            margin-bottom:14px;
            display:inline-block;
            list-style-type:none;
            border:2px solid #dbdbdb;
        }
        .begin{
            position:relative;
            left:26px;
            top:20px;
        }
        .jiage{
            position:relative;
            top:19px;
            left:86px;
        }
        .wenzi{
            position:relative;
            left:61px;
            color:#aaa;
            top:21px;
        }
        #topc>ul{
            position:relative;
            left:118px;
            top:22px;
            float:left;
        }
        #topc>ul>li{
            display:inline-block;
            margin-right:170px;
        }
        #topc>ul>li>ul>li{
            color:#fff;
            line-height:21px;
        }
        #topc{
            background-color:#2e2e2e;
            height:118px;
            position:relative;
            top:-476px;
        }
        #topd{
            background-color:#2e2e2e;
            border-top:1px solid #454545;
            line-height:19px;
            height:97px;
            position:relative;
            top:-476px;
            color:#fff;
        }
        #topd>#topdtwo{
            display:inline;
            position:relative;
            left:300px;
            top:25px;
        }
        #topd>#topdone{
            position:relative;
            left:300px;
            top:17px;
        }
        .gai1{
            position:relative;
            top:32px;
        }
        #topd>#topdtwo>img{
            display:inline-block;
        }
        .gai{
            position:relative;
            top:16px;
        }
        li{
            list-style-type:none;
        }
        *{
            padding:0;
            margin:0;
        }
    </style>
</head>
<body>
    <div id="top">
        <p id="topone">我的收藏</p>
        <p id="toptwo">E族之家手机版</p>
        <img src="image/qqlogo.jpg" alt=""/>
        <p id="topthree">328203328</p>
        <p id="topfour">扫描加入</p>
        <p id="topfive">欢迎来到E族之家,请登录|注册</p>
    </div>
    <div id="topa">
        <div id="topaone">
            <img src="image/logoone.jpg" alt="" id="p1"/>
            <form action="" method="post">
                <textarea name="sousuo" rows="1" cols="40">请输入关键词！</textarea>
                <p>搜索</p>
            </form>
            <img src="image/购物车0件.jpg" alt="" id="p2"/>
        </div>
        <div id="topatwo">
            <ul>
                <li>首页</li>
                <li>E族生活</li>
                <li>E族服务</li>
                <li>E族爱心</li>
            </ul>
        </div>
    </div>
    <div id="topb">
        <p id="topbone">当前位置:E族爱心&gt;食品</p>
        <div id="topbtwo">
            <img src="image/logotwo.jpg" alt=""/>
            <p>全部分类</p>
        </div>
        <div id="topbthree">
            <p id="topbthree-1">&gt;食品</p>
            <p id="topbthree-2">&gt;生活用品</p>
        </div>
        <div id="topbfour">
            <ul>
                <li>
                    <img src="image/辣椒的图片.jpg" alt="" class="begin"/>
                    <p class="wenzi">精品辣椒100g</p>
                    <p class="jiage">&yen;90.00</p>
                </li>
                <li>
                    <img src="image/百香果的图片.jpg" alt="" class="begin"/>
                    <p class="wenzi">特技百香果3斤</p>
                    <p class="jiage">&yen;90.00</p>
                </li>
                <li class="gai">
                    <img src="image/啤酒的图片.jpg" alt="" class="begin"/>
                    <p class="wenzi">万威啤酒500ml</p>
                    <p class="jiage">&yen;90.00</p>
                </li>
                <li class="gai1">
                    <img src="image/坚果的图片.jpg" alt="" class="end"/>
                    <p class="wenzi">万威啤酒500ml</p>
                    <p class="jiage">&yen;90.00</p>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="image/辣椒的图片.jpg" alt="" class="begin"/>
                    <p class="wenzi">精品辣椒100g</p>
                    <p class="jiage">&yen;90.00</p>
                </li>
                <li>
                    <img src="image/百香果的图片.jpg" alt="" class="begin"/>
                    <p class="wenzi">特技百香果3斤</p>
                    <p class="jiage">&yen;90.00</p>
                </li>
                <li class="gai">
                    <img src="image/啤酒的图片.jpg" alt="" class="begin"/>
                    <p class="wenzi">万威啤酒500ml</p>
                    <p class="jiage">&yen;90.00</p>
                </li>
                <li class="gai1">
                    <img src="image/坚果的图片.jpg" alt="" class="end"/>
                    <p class="wenzi">万威啤酒500ml</p>
                    <p class="jiage">&yen;90.00</p>
                </li>
            </ul>
        </div>
    </div>
    <div id="topc">
        <ul>
            <li>
                <ul>
                    <li>新手上路</li>
                    <li>售后流程</li>
                    <li>购物流程</li>
                    <li>订购方式</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>配送方式</li>
                    <li>货到付款区域</li>
                    <li>配送支付查询</li>
                    <li>支付方式说明</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>购物指南</li>
                    <li>常见问题</li>
                    <li>订购流程</li>
                    <li>注册新会员</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>售后服务</li>
                    <li>退换货原则</li>
                    <li>售后服务保证</li>
                    <li>换货流程</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>关于我们</li>
                    <li>网站故障报告</li>
                    <li>联系我们</li>
                    <li>投诉与建议</li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="topd">
        <p id="topdone">E族生活&nbsp; &nbsp;&nbsp;|&nbsp;&nbsp; &nbsp;居家维修保养&nbsp; &nbsp;&nbsp;|&nbsp;&nbsp; &nbsp;住宿优惠信息&nbsp; &nbsp;&nbsp;| &nbsp;&nbsp;&nbsp;出行接送&nbsp; &nbsp;&nbsp;|&nbsp; &nbsp;&nbsp;E族活动&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;E族爱心&nbsp; &nbsp;&nbsp;|&nbsp; &nbsp;&nbsp;积分商城</p>
        <p id="topdtwo">
            ©2017-2018 E族之家 版权所有，并保留所有权利。ICP备案证书号：粤ICP备17127392号
        </p>
    </div>
</body>
</html>
